<template>
  <div class="container">
    <div
      class="aside"
      :class="collapse && 'collapse'"
    >
      <!-- ElScrollbar的滚动高度是根据父容器100%计算的 -->
      <ElScrollbar>
        <ElMenu
          :default-active="defaultActive"
          class="menu"
          :collapse="collapse"
          collapse-transition
          router
        >
          <!-- 递归组件MenuItem,当使用navBar菜单时,需要预先拼接当前选中菜单的path -->
          <MenuItem
            :menu-list="asideRoutes"
            :collapse="collapse"
            :base-path="isUseNavMenu ? this.$route.matched[0].path : '/'"
            root
          />
        </ElMenu>
      </ElScrollbar>
    </div>
    <div
      class="aside-footer"
      :class="collapse && 'footer-collapse'"
    >
      <i
        class="collapse-btn"
        :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="$store.commit('user/setCollapse')"
      />
    </div>

    <div class="main">
      <transition
        mode="out-in"
        name="animate__animated animate__bounce"
        enter-active-class="animate__fadeIn"
        leave-active-class="animate__fadeOut"
        appear
        :duration="{ enter: 200, leave: 100 }"
      >
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import MenuItem from './MenuItem.vue'
import { HOME_PAGE } from '@/router/config'
export default {
  name: 'LayoutMain',
  components: { MenuItem },
  data () {
    return {
      isUseNavMenu: process.env.VUE_APP_USE_NAV_MENU === 'true',
    }
  },
  computed: {
    collapse () {
      return this.$store.state.user.collapse
    },

    // 计算出侧边栏的路由对象
    asideRoutes () {
      let asideRoutes
      if (!this.isUseNavMenu) {
        asideRoutes = this.$router.options.routes
      } else {
        // 如果使用的是Nav要显示Menu的模式，那么第一层路由会成为nav上的tab，所以就从当前匹配根路由中取第二层路由作为侧边栏菜单路由
        asideRoutes = this.$router.options.routes.find(
          (item) => item.name === this.$route.matched[0].name
        ).children
      }

      // 把hideTab为true的过滤掉
      function filterHideTab (routes) {
        const res = routes.filter((item) => {
          if (item.meta.hideTab) {
            return false
          } else {
            if (item.children?.length) {
              item.children = filterHideTab(item.children)
            }
            return true
          }
        })
        return res
      }
      asideRoutes = filterHideTab(_.cloneDeep(asideRoutes))
      return asideRoutes
    },

    // 获取menu默认激活的路由
    defaultActive () {
      /*
        两种情况：
        1.访问非'/'的时候，需要取路由匹配路径中最后的一个hideTab===false的path
        2.访问的是'/'的时候，自动计算asideRoutes对应的首个视图并跳转(方案取消)
        2.访问的是'/'的时候，则为预先设置好的HOME_PAGE路径
      */
      let pathName
      if (process.env.VUE_APP_ROUTER_MODE === 'hash') {
        pathName = window.location.hash.substring(1)
      } else {
        pathName = window.location.pathname
      }
      let defaultRoute = '/'
      if (pathName !== '/') {
        const matched = this.$route.matched
        let i = 1
        while (i !== matched.length) {
          if (matched.at(-i).meta.hideTab) {
            i++
          } else {
            defaultRoute = matched.at(-i).path
            break
          }
        }
        return defaultRoute
      }

      // if (this.isUseNavMenu) return this.$route.matched[0].children[0].path

      // 递归获取，默认选中的永远是第一个菜单项，如果菜单项是有子菜单的话，则取子菜单的第一个，如果还是有子菜单，则继续递归
      // 选中后获得该path给menu作为默认激活，并且跳转到该路由
      // function getDefaultRoute (routes, basePath = '/') {
      //   if (!routes[0].children?.length) {
      //     defaultRoute = path.resolve(basePath, routes[0].path)
      //   } else {
      //     getDefaultRoute(routes[0].children, routes[0].path)
      //   }
      // }
      // getDefaultRoute(this.asideRoutes)

      // this.$router.replace(defaultRoute)
      // return defaultRoute

      return HOME_PAGE
    }
  },
  mounted () {
    // 有登录功能后，
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  height: calc(100vh - #{$navBarHeight});

  $asideFooterHeight: 40px;

  .aside {
    position: relative;
    flex-shrink: 0;
    width: $asideWidth;
    // 这里要再减去底部脱离文档流的收缩按钮的高度
    height: calc(100vh - #{$navBarHeight} - #{$asideFooterHeight});
    box-sizing: border-box;
    transition-property: width, background-color, border;
    transition-duration: $layoutAnimationTime;
    border-right: 1px solid var(--asideBorderColor);
    background-color: var(--asideBgColor);

    &.collapse {
      width: 64px;

      /deep/.el-scrollbar {
        //收缩时因为右边框的原因,会让滚动容器获取宽度少1px出现横向滚动条,手动指定同样宽度
        width: 64px !important;
      }
    }
  }

  .aside-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    height: $asideFooterHeight;
    width: $asideWidth;

    transition-property: width, background-color, border;
    transition-duration: $layoutAnimationTime;
    border-top: 1px solid var(--asideBorderColor);
    border-right: 1px solid var(--asideBorderColor);
    background-color: var(--asideFooterBgColor);

    &.footer-collapse {
      width: 64px;
    }

    .collapse-btn {
      // color: $asideCollapseColor;
      display: inline-block;
      width: 64px;
      text-align: center;
      line-height: $asideFooterHeight - 1px;
      cursor: pointer;
      font-size: 18px;
      color: var(--primaryColor);
    }
  }
  .main {
    flex-grow: 1;
    height: 100%;
    width: calc(100vw - #{$asideWidth});
    overflow-y: auto;
    transition: background-color $layoutAnimationTime;
    background-color: var(--layoutMainBgColor);
  }
}
</style>

<style lang="scss">
.aside .el-menu {
  height: 100%;
  // 默认时，收起侧边栏菜单后小箭头还在，通过选择器把它去掉
  background-color: transparent !important;

  border: none !important;
  &.el-menu--collapse .el-submenu__icon-arrow {
    display: none !important;
  }
}
</style>
